<nav class="navbar navbar-expand-md navbar-dark bg-dark" aria-label="Fourth navbar example">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ base_path() }}/">
            <img src="{{ base_path() }}/img/bacula-web-logo.png" alt="Bacula-Web logo" width="22" height="24"
                 class="d-inline-block align-top">
            {{ app_name }}
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarcollapse"
                aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarcollapse">
            <ul class="navbar-nav me-auto mb-2 mb-md-0">
                {% if user_authenticated == true or enable_users_auth == false %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"
                           aria-expanded="false">{{ 'Reports'|trans }}</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ base_path() }}/jobs">{{ 'Jobs'|trans }}</a></li>
                            <li><a class="dropdown-item" href="{{ base_path() }}/pools">{{ 'Pools'|trans }}</a></li>
                            <li><a class="dropdown-item" href="{{ base_path() }}/volumes">{{ 'Volumes'|trans }}</a></li>
                            <li><a class="dropdown-item" href="{{ base_path() }}/backupjob">{{ 'Backup job'|trans }}</a>
                            </li>
                            <li><a class="dropdown-item" href="{{ base_path() }}/client">{{ 'Client'|trans }}</a></li>
                            <li><a class="dropdown-item"
                                   href="{{ base_path() }}/directors">{{ 'Director(s)'|trans }}</a></li>
                        </ul>
                    </li>
                {% endif %}
            </ul>

            <div class="d-lg-flex col-lg-3 justify-content-lg-end">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i
                                    class="fa fa-database"></i> {{ catalog_label }}</a>
                        <ul class="dropdown-menu">
                            {% for catalog_id, catalog_name in catalogs %}
                                <li>
                                    <a class="dropdown-item" href="{{ url_for('home') }}?catalog_id={{ catalog_id }}">
                                        {% if catalog_id == catalog_current_id %}
                                            <i class="fa fa-check fa-fw"></i>
                                        {% else %}
                                            <i class="fa fa-fake fa-fw"></i>
                                        {% endif %}{{ catalog_name }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </li>
                </ul>

                <ul class="navbar-nav">
                    {% if user_authenticated is not empty %}
                        {% if enable_users_auth == true and user_authenticated == true %}
                            <li class="nav-item dropdown dropstart">

                                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"
                                   aria-expanded="false"><i class="fa-solid fa-user"></i>
                                    {{ username }}
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="{{ url_for('user') }}" title="User settings">
                                            <i class="fa fa-wrench fa-fw"></i> {{ 'User settings'|trans }}
                                        </a>
                                    </li>
                                    <li>
                                        <form class="navbar-form navbar-left" action="{{ base_path() }}/signout"
                                              method="POST">
                                            <input class="form-control" type="hidden" name="action" value="logout">
                                            <button type="submit" class="btn btn-sm btn-light ms-2" title="Sign out">
                                                <i class="fa fa-sign-out fa-lg"></i> {{ 'Sign out'|trans }}
                                            </button>
                                            {{ csrf|raw }}
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        {% endif %}
                    {% endif %}
                </ul>

                <button class="btn btn-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
                        aria-controls="offcanvasRight"><i class="fa-solid fa-gear"></i></button>
            </div>

        </div>

    </div>
</nav>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasRightLabel">{{ 'About'|trans }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <h6>{{ 'Settings'|trans }}</h6>

        <a class="btn btn-primary m-1 w-100" href="{{ base_path() }}/settings" title="Settings"><i
                    class="fa fa-cogs fa-fw"></i> {{ 'Settings'|trans }}</a>

        <a class="btn btn-success m-1 w-100" href="{{ base_path() }}/test" title="Display the test page"><i
                    class="fa fa-wrench fa-fw"></i> {{ 'Test page'|trans }}</a>

        <hr>

        <h6>{{ 'Help'|trans }}</h6>

        <a class="btn btn-light m-1 w-100" href="https://www.bacula-web.org" title="Visit the official web site"
           target="_blank"
           rel="noopener noreferrer"><i class="fa fa-globe fa-fw"></i> {{ 'Official web site'|trans }}</a>

        <a class="btn btn-light m-1 w-100" href="https://github.com/bacula-web/bacula-web/issues"
           title="Bug and feature request tracker" target="_blank" rel="noopener noreferrer"><i
                    class="fa fa-bug fa-fw"></i> {{ 'Bug tracker'|trans }}</a>

        <a class="btn btn-light m-1 w-100" href="https://www.bacula-web.org/docs" title="Documentation"
           target="_blank"
           rel="noopener noreferrer"><i class="fa fa-book fa-fw"></i> {{ 'Documentation'|trans }}</a>

        <a class="btn btn-light m-1 w-100" href="https://github.com/bacula-web/bacula-web"
           title="Bacula-Web project on GitHub" target="_blank" rel="noopener noreferrer">
            <i class="fa-brands fa-github"></i> {{ 'Project on GitHub'|trans }}
        </a>

        <hr>

        <h6>{{ 'Version'|trans }}</h6>
        <button type="button" class="btn btn-outline-secondary w-100" disabled>{{ app_name }} {{ app_version }}</button>

    </div>
</div>
